import React from 'react';
import { connect } from 'dva';
import { Form, Input, InputNumber, Button } from 'antd';

const formItemLayout = {
  labelCol: {
    xs: { span: 3 },
    sm: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 3,
    },
  },
};

const SendMessage = ({ dispatch, username }) => {

  function onFinish(value) {
    dispatch({
      type: 'message/new',
      payload: value,
    });
  }

  function onReset() {
    dispatch({
      type: 'message/setCreated',
      payload: {
        messageListState: 'messagelist'
      }
    })
  }

  return (
    <Form
      {...formItemLayout}
      name="new-messages"
      onFinish={onFinish}
      onReset={onReset}>
      <Form.Item label="发件人">
        <Input placeholder={username} disabled={true}/>
      </Form.Item>
      <Form.Item name={'title'} label="标题" rules={[{ required: true }]}>
        <Input sytle={{ width: 350 }}/>
      </Form.Item>
      <Form.Item name={'content'} label="内容" rules={[{ required: true }]}>
        <Input.TextArea sytle={{ width: 350 }}/>
      </Form.Item>
      <Form.Item {...tailFormItemLayout}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
        <Button type="primary" htmlType="reset" style={{ marginLeft: 10 }}>
          取消
        </Button>
      </Form.Item>
    </Form>
  )
};

export default connect(state => {
  const { username } = state.users;
  return {
    username
  }
})(SendMessage);
